<template>
	<div id="woc" class="content">
		<!-- 全真模拟页 -->
		<!-- 面包屑导航 -->
		<Crumbs :item="crumbsItem" @crumbsClick="crumbsClick"></Crumbs>
		<div id="b" class="tabs" v-if="show == 1 || show == 2">
			<div :class="{ active: show == 1 }" @click="show = 1"><span>章节错题</span></div>
			<div :class="{ active: show == 2 }" @click="show = 2"><span>试卷错题</span></div>
		</div>
		<!-- 章节选择 -->
		<div id="xuanze" v-if="show == 1">
			<ul class="kemu_ul">
				<li v-for="(item, index) in subChapter" :key="index">
					<h1 @click="openKemu(item.subid, index)">
						<span>{{ item.name }}</span>
						<div class="rt_s">
							<i class="mr iconfont icon-shuliang" />
							<span class="mr">错题总数：{{ item.errorcount }}</span>
							<i :class="['iconfont', kOpens[index].kOpen ? 'icon-jiantou_zhangjiexuanze' : 'icon-jiantou_zhangjiexuanze-copy']" />
						</div>
					</h1>
					<ul class="chapter_ul" v-if="kOpens[index].kOpen">
						<li v-for="(citem, cindex) in item.chapters" :key="cindex">
							<h1>
								<span>{{ citem.chapterName }}</span>
								<div class="rt_s">
									<span class="mr">练习进度：{{ citem.studyCount }}/{{ citem.counts }}</span>
									<div class="btn" @click="startAnswer(1, item, citem)">开始练习</div>
								</div>
							</h1>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<div id="papers" class="" v-if="show == 2">
			<div class="paperList" v-for="(item, index) in paperList" :key="index">
				<h1>{{ item.papername }}</h1>
				<div class="item_a">
					<span>
						<i class="iconfont icon-shijian"></i>
						&nbsp;交卷时间：{{ item.createtime }}
					</span>
					<span>
						<i class="iconfont icon-shuliang"></i>
						&nbsp;错题数量：{{ item.counts }}
					</span>
				</div>
				<div class="item_b" @click="startAnswer(2, item)"><div class="item_btn">开始练习</div></div>
			</div>
			<PgCom v-if="total > pageSize" :total="total" :pageNo="pageNo" :pageSize="pageSize" @pageNoChange="pageNoChange"></PgCom>
		</div>
		<answer
			ref="answer"
			v-if="show == 11"
			:CorrectCount="correctCount"
			:ErrorCount="errorCount"
			:Question="Question"
			:CountVO="CountVO"
			:isRecitation="isRecitation"
			:isCorrecting="isCorrecting"
			:Paper="Paper"
			:autoCorrecting="autoCorrecting"
			:topicNumber="Paper.number"
			@updateAnswerHistory="updateAnswerHistory"
			updateHis="updateErrorAnswer"
			:clearWrong="clearWrong"
		></answer>
		<Empty v-if="(show == 1 && subChapter.length == 0) || (show == 2 && paperList.length == 0)" text="暂无错题"></Empty>
		<Popup v-if="clearModalShow" :mold="1" :btnTxt="['下次清除', '清除']" @closeClick="clearModalShow = false" @cancelClick="nextClear" @configClick="clearSubmit">
			<div slot="modalSlot">是否需要清除已答对题目？</div>
		</Popup>
		<Popup v-if="warningShow" :mold="2" title="正在清除..."></Popup>
	</div>
</template>

<script>
import exam from '../../../mixins/exam.js';
export default {
	name: 'WrongOrColl',
	components: {},
	mixins: [exam],
	data() {
		return {
			show: 1,
			pageNo: 1,
			saveType: 0, //暂存当前
			pageSize: 6,
			total: 0, //总条数
			crumbsItem: [{ name: '我的错题', url: 1 }], //面包屑导航
			subjectNam: '',
			paperList: [], //试卷列表
			kOpens: [], //科目知否展开
			subChapter: [], //科目列表
			openIndex: 0, //打开的科目
			examData: {}, //试卷题目
			Paper: {}, //试卷信息
			CountVO: {},
			Question: [],
			correctCount: 0, //正确数量
			errorCount: 0, //错误数量
			isRecitation: false, //是否背题模式
			autoCorrecting: false, //是否自动批改题目 我的错题
			clearModalShow: false, //是否清除已答对题目
			warningShow: false, //答题清除
			clearWrong: false, //已经保存答题记录
			colqueid: [] //答对题目
		};
	},
	computed: {},
	created() {
		this.getSubject();
	},
	watch: {
		show() {
			this.pageNo = 1;
			if (this.show == 2) {
				this.getPaper();
			} else if (this.show == 1) {
				this.getSubject();
			}
		}
	},
	mounted() {
		window.addEventListener('beforeunload', e => {
			if (this.refresh.clickDis) {
				this.beforeunloadHandler(e);
			}
		});
	},
	destroyed() {
		window.addEventListener('beforeunload', e => {
			if (this.refresh.clickDis) {
				this.beforeunloadHandler(e);
			}
		});
	},
	methods: {
		beforeunloadHandler(e) {
			e = e || window.event;
			if (this.show == 11) {
				if (e) {
					e.returnValue = '正在更新数据';
				}
				this.$refs.answer.updateHistoryHander('updateErrorAnswer');
				return;
			}
		},
		pageNoChange(val) {
			this.pageNo = val;
			this.getPaper();
		},
		crumbsClick(type) {
			//导航切换事件
			if (this.show == 11 && type != 11) {
				this.saveType = type;
				this.clearWrong = true;
				this.$refs.answer.updateHistoryHander('updateErrorAnswer');
				this.Question.map(item => {
					if (item.isCorrect) {
						this.colqueid.push(item.colqueid);
					}
				});
				if (this.colqueid.length == 0) {
					this.nextClear();
					return;
				} else {
					this.clearModalShow = true;
				}
			} else {
				this.show = type;
				this.pageNo = 1;
				if (type == 1 || type == 2) {
					this.crumbsItem = [{ name: '我的错题', url: 1 }];
				}
			}
		},
		// 清除我的错题
		clearSubmit() {
			this.warningShow = true;
			//清除我的错题
			let params = {
				colqueid: this.colqueid ? this.colqueid.join(',') : '',
				chapterId: this.Paper.chapterId,
				paperId: this.Paper.paperId,
				type: 2
			};
			this.axios
				.get('/web/student/errorQuestion/updateAnswerHistory', {
					params
				})
				.then(() => {
					this.clearWrong = false;
					this.clearModalShow = false;
					this.warningShow = false;
					this.nextClear();
				});
		},
		//下次清除
		nextClear() {
			this.show = this.saveType;
			this.pageNo = 1;
			if (this.saveType == 1 || this.saveType == 2) {
				this.crumbsItem = [{ name: '我的错题', url: 1 }];
				this.getSubject();
			}
			this.colqueid=[]
			this.clearWrong=false;
			this.clearModalShow = false;
		},
		setCrumbs(name, url) {
			let navLi = [];
			if (this.show == 1) {
				navLi = [{ name: '章节错题', url: 1 }, { name: this.subjectNam, url: 1 }, { name: name, url: url }];
			} else if (this.show == 2) {
				navLi = [{ name: '试卷错题', url: 2 }, { name: name, url: url }];
			}
			this.crumbsItem = this.crumbsItem.concat(navLi);
		},
		// 获取科目
		getSubject() {
			this.axios.get('/web/student/errorQuestion/getErrorSubject', {}).then(res => {
				this.subChapter = res;
				this.kOpens = [];
				for (var i = 0; i < this.subChapter.length; i++) {
					this.kOpens.push({ kOpen: false });
				}
			});
		},
		//获取科目章节
		getChapter(subid) {
			this.axios.get(`/web/student/errorQuestion/getErrorChapter/${subid}`, {}).then(res => {
				this.$set(this.subChapter[this.openIndex], 'chapters', res);
			});
		},
		// 获取试卷错题
		getPaper() {
			// this.papers = [];
			this.show = 2;
			const pageData = {
				pageNo: this.pageNo,
				pageSize: this.pageSize
			};
			this.axios.post('/web/student/errorQuestion/getErrorPaperList', pageData).then(res => {
				this.paperList = res.list;
				this.total = res.total;
			});
		},
		openKemu(subid, index) {
			this.kOpens[index].kOpen = !this.kOpens[index].kOpen;
			this.openIndex = index;
			this.getChapter(subid);
		},
		startAnswer(type, item, data) {
			//章节错题
			if (type == 2) {
				data = item;
			}
			let pageData = {
				type: 2
			};
			this.Paper = data;
			if (type == 1) {
				this.subjectNam = item.name;
				this.setCrumbs(data.chapterName, 11);
				pageData.chapterId = data.chapterId;
			} else {
				this.setCrumbs(data.papername, 11);
				pageData.paperid = data.paperid;
			}
			// 查看错题
			this.isRecitation = false;
			this.isCorrecting = true;
			this.autoCorrecting = true;
			this.correctCount = data.correctCount;
			this.errorCount = data.errorCount;
			this.myWrongTopic(pageData);
		},
		updateAnswerHistory(e) {
			this.isRecitation = false;
			this.isCorrecting = true;
			this.autoCorrecting = true;
			this.myWrongTopic(e);
		}
	}
};
</script>

<style scoped src="../../style/pages/wrongOrColl.css" />
